<template>
	<view class="container">
		<view class="brand-info">
			<view class="name">
				<image class="img" :src="bannerInfo.imgUrl" background-size="cover"></image>
				<view class="info-box">
					<view class="info">
						<text class="txt">{{bannerInfo.name}}</text>
						<text class="line"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="sort">
			<view class="sort-box">
				<view class="item " :class="currentSortType == 'default' ? 'active' : ''" @tap="openSortFilter" id="defaultSort">
					<text class="txt">综合</text>
				</view>
				<view class="item by-price " :class="[currentSortType == 'price' ? 'active' : '',currentSortOrder == 'asc'  ? 'asc' : 'desc']"
				 @tap="openSortFilter" id="priceSort">
					<text class="txt">价格</text>
				</view>
				<view class="item by-price " :class="[currentSortType == 'sales' ? 'active' : '',currentSortOrder == 'asc'  ? 'asc' : 'desc']"
				 @tap="openSortFilter" id="salesSort">
					<text class="txt">销量</text>
				</view>
			</view>
			<view class="sort-box-category" v-if="categoryFilter">
				<view class="item" :class="item.checked ? 'active' : ''" v-for="(item,index) in  filterCategory" :key="index"
				 :data-category-index="index" @tap="selectCategory">{{item.name}}</view>
			</view>
		</view>
		<view class="cate-item">
			<view class="b">
				<block v-for="(iitem,iindex) in goodsList" :key="iindex">
					<view class="item " :class="iindex % 2 == 0 ? 'item-b' : '' " @tap="gotoGoods(iitem.id)">
						<image class="img" :src="iitem.picUrl" background-size="cover"></image>
						<text class="name">{{iitem.name}}</text>
						<view class="price">
							<view class="priceTg jhx_f8">￥{{iitem.retailPrice}}</view>
							<view class="brokerage" v-if="isAgent && iitem.brokeragePrice>0.01">赚￥{{iitem.brokeragePrice}}</view>
							<view class="brokerage" v-else>立即购买</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				bannerInfo: {
					'imgUrl': 'http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png',
					'name': '大家都在买的'
				},
				categoryFilter: false,
				filterCategory: [],
				goodsList: [],
				categoryId: 0,
				currentSortType: 'default',
				currentSort: 'browse',
				currentSortOrder: 'desc',
				isAgent: false,
				isSearch: true,
				page: 1,
				size: 10,
				totalPages: 1
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.getGoodsList();
		},
		onShow: function() {
			// 页面显示
			let that = this;
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		onReachBottom: function() {
			if (this.totalPages > this.page) {
				this.page = this.page + 1;
			} else {
				uni.showToast({
					title: '已经到底了!',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			this.getGoodsList();
		},
		methods: {
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			getCategoryList: function() {
				var that = this;

				that.$util.request(that.$api.api.GoodsFilter, {
						isHot: 1
					})
					.then(function(res) {
						if (res.errno === 0) {
							that.filterCategory = res.data.filterCategoryList;
						}
					});
			},
			getGoodsList: function() {
				var that = this;

				that.$util.request(that.$api.api.GoodsList, {
						isHot: true,
						page: that.page,
						size: that.size,
						order: that.currentSortOrder,
						sort: that.currentSort,
						categoryId: that.categoryId
					})
					.then(function(res) {
						if (res.errno === 0) {
							that.goodsList = that.isSearch ? res.data.goodsList : that.goodsList.concat(res.data.goodsList);
							that.filterCategory = res.data.filterCategoryList;
							that.totalPages = res.data.totalPages;
							that.isSearch = false;
						}
					});

			},
			openSortFilter: function(event) {
				let currentId = event.currentTarget.id;
				let tmpSortOrder = 'asc';
				switch (currentId) {
					case 'categoryFilter':
						this.categoryFilter = !this.categoryFilter;
						this.currentSortType = 'category';
						this.currentSort = 'add_time';
						this.currentSortOrder='desc';
						this.isSearchthis.true;
						break;
					case 'priceSort':
						if (this.currentSortOrder == 'asc') {
							tmpSortOrder = 'desc';
						}
						this.currentSortType = 'price';
						this.currentSort = 'retail_price';
						this.currentSortOrder = tmpSortOrder;
						this.categoryFilter = false;
						this.isSearch = true;

						this.getGoodsList();
						break;
					case 'salesSort':
						if (this.currentSortOrder == 'asc') {
							tmpSortOrder = 'desc';
						}
						this.currentSortType = 'sales';
						this.currentSort = 'sales';
						this.currentSortOrder = tmpSortOrder;
						this.categoryFilter = false;
						this.isSearch = true;
						this.getGoodsList();
						break;
					default:
						//综合排序
						this.currentSortType = 'default';
						this.currentSort = 'add_time';
						this.currentSortOrder = 'desc';
						this.categoryFilter = false;
						this.isSearch = true;
						this.categoryId = 0;
						this.getGoodsList();
				}
			},
			selectCategory: function(event) {
				let currentIndex = event.target.dataset.categoryIndex;
				this.categoryFilter = false;
				this.categoryId = this.filterCategory[currentIndex].id;
				this.getGoodsList();
			},
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.brand-info .name {
		width: 100%;
		height: 278rpx;
		position: relative;
	}

	.brand-info .img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 278rpx;
	}

	.brand-info .info-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 278rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.brand-info .info {
		display: block;
	}

	.brand-info .txt {
		display: block;
		height: 40rpx;
		font-size: 37.5rpx;
		color: #fff;
	}

	.brand-info .line {
		margin: 0 auto;
		margin-top: 16rpx;
		display: block;
		height: 2rpx;
		width: 145rpx;
		background: #fff;
	}

	.sort {
		position: relative;
		background: #fff;
		width: 100%;
		height: 78rpx;
	}

	.sort-box {
		background: #fff;
		width: 100%;
		height: 78rpx;
		overflow: hidden;
		padding: 0 30rpx;
		display: flex;
		border-bottom: 1px solid #d9d9d9;
	}

	.sort-box .item {
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		flex: 1;
		color: #333;
		font-size: 30rpx;
	}

	.sort-box .item .txt {
		display: block;
		width: 100%;
		height: 100%;
		color: #333;
	}

	.sort-box .item.active .txt {
		color: #ec4223;
	}

	.sort-box .item.by-price {
		background: url('') 155rpx center no-repeat;
		background-size: 15rpx 21rpx;
	}

	.sort-box .item.by-price.active.asc {
		background: url('') 155rpx center no-repeat;
		background-size: 15rpx 21rpx;
	}

	.sort-box .item.by-price.active.desc {
		background: url('') 155rpx center no-repeat;
		background-size: 15rpx 21rpx;
	}

	.sort-box-category {
		background: #fff;
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 40rpx 40rpx 0 0;
		border-bottom: 1px solid #d9d9d9;
	}

	.sort-box-category .item {
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		float: left;
		padding: 0 16rpx;
		margin: 0 0 40rpx 40rpx;
		border: 1px solid #666;
		color: #333;
		font-size: 24rpx;
	}

	.sort-box-category .item.active {
		color: #ec4223;
		border: 1px solid #ec4223;
	}

	.cate-item .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		border-top: 1rpx solid #f4f4f4;
		margin-top: 20rpx;
	}

	.cate-item .b .item {
		float: left;
		background: #fff;
		width: 375rpx;
		padding-bottom: 33.333rpx;
		border-bottom: 1rpx solid #f4f4f4;
		height: auto;
		overflow: hidden;
		text-align: center;
	}

	.cate-item .b .item-b {
		border-right: 1rpx solid #f4f4f4;
	}

	.cate-item .item .img {
		margin-top: 10rpx;
		width: 302rpx;
		height: 302rpx;
	}

	.cate-item .item .name {
		display: block;
		width: 365.625rpx;
		height: 35rpx;
		padding: 0 20rpx;
		overflow: hidden;
		margin: 11.5rpx 0 22rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}

	.cate-item .item .price {
		display: flex;
		width: 365.625rpx;
		height: 50rpx;
		text-align: center;
		color: #ec4223;
	}

	.cate-item .b .priceTg {
		width: 55%;
	}

	.cate-item .b .brokerage {
		float: left;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 40%;
	}
</style>
